<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dept").change(function () {
                //获得被选中的value的值
                var  did=$(this).val();
                if(did==-1){
                    alert("请选择部门")
                }else{
                    //将did传递给服务器
                    $.ajax({
                        url:"/getmajor",
                        data:"did="+did,
                        type:"post",
                        dataType:"json",
                        success:function (rs) {
                            //让下拉框的长度为0
                            $("#major")[0].length=0;
                            for(var i=0;i<rs.length;i++){
                                $("#major")[0].add(new Option(rs[i].majorname,rs[i].majorid));//Option(显示到标签对中的值,value值)
                            }
                        }
                    })
                }
            })
        })


        /*  // 执行注册.
          $("#btnSubmit").click(function(){
              // 发送ajax请求.
              $.post(
                  baseUrl +"dev/user/register",
                  $("#registerForm").serialize(),
                  function(result){
                      if(result.code == 0){
                          // 跳转到登录页面     GET,async
                          location.href = "/dev/user/login-ui";
                      }else{
                          $("#p").html(result.msg).css("color","yellow");
                      }
                  },
                  "json"
              );
          });*/
        /*    // 校验两次密码
            function keyUp() {
                var a = $('#devPassword').val();
                var b = $('#againPwd').val();
                if (a == b) {
                    $('#btnSubmit').removeAttr('disabled');
                    $("#pwdInfo").html("");
                }else {
                    $('#btnSubmit').attr('disabled', 'disabled');
                    $("#pwdInfo").html("两次密码不一致!");
                }
            }*/
    </script>
</head>
<body>
<div class="main">
                <form id="registerForm"  >
                    <p id="p" th:style="'color:red;'"></p>
                    <div class="userName">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" required name="username" placeholder="输入用户名"><!--<em>由5-8个字符组成！</em>-->
                    </div>
                    <div class="password">
                        <label for="password">密码:</label>
                        <input type="password" id="password" required name="password" placeholder="输入密码" onkeyup="keyUp()"><!--<em>使用字母、数字、符号两种及以上的组合，8-12个字符</em>-->
                    </div>
                    <div class="password">
                        <label for="againPwd">员工姓名:</label>
                        <input type="text" id="realname" required name="realname" placeholder="输入员工姓名">
                    </div>

                    <div class="form-group">
                        <label for="headPic" class="col-sm-2 control-label">本人头像</label>
                        <div class="col-sm-10">
                            <img id="img" src="" width="100px" height="100px"/>
                            <input id="hiddenPic" name="headPic" type="hidden" />
                            <input id="headPic" onchange="preview(this)" type="file" class="form-control" />
                            <button type="button" class="btn btn-default" onclick="uploadPic()">上传图片</button>
                        </div>
                    </div>
                    <div class="form-group col-md-4 column">
                        <label for="className" class="col-sm-4 control-label">部门名称</label>
                        <div class="col-sm-8">
                            <td>

                                <select name="deptid"  id="dept">
                                    <option value="-1">请选择部门</option>
                                    <#list  deptlist as d>
                                        <option value="${d.deptid}">${d.deptname}</option>
                                    </#list>
                                </select>
                            </td>
                        </div>
                    </div
                    <div class="password">
                        <label for="againPwd">职位名称:</label>
                        <input type="text" id="deptname" required name="deptname" placeholder="请输入职位名称">
                    </div>
                    <div class="form-group col-md-4 form-group">
                        <td>请选择所属职务类别<span style="color:red">*</span>：</td>
                        <td>
                            <select id="major" name="majorid">
                                <option value="-1">请选择</option>
                            </select>
                        </td>
                    </div>
                   <#-- <button type="button" onclick="tripSubmit()" class="btn btn-default">添加</button>-->
                    <button type="button" onclick="btnSubmit()">保存</button>
    </div>
            </form>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
    // 异步校验用户名
    $("#realname").blur(function(){
        //1. 获取用户输入的用户名
        var realname = $(this).val();
        //2. 长度的校验
        if(realname == null || realname.length < 5){
            $("#p").html("员工姓名长度要求大于等于5位!!").css("color","red");
            $('#btnSubmit').attr('disabled', 'disabled');
            return;
        }
        //3. 发送ajax请求.
        $.post(
            "/check-realname",
            {realname: realname},
            function(result){
                if(result.code == 0){
                    $("#p").html("员工姓名可以使用!!").css("color","green");
                    $('#btnSubmit').removeAttr("disabled");
                }else{
                    $("#p").html("员工姓名已经被注册!!").css("color","black");
                    $('#btnSubmit').attr('disabled', 'disabled');
                }
            },
            "json"
        );
    });

    //获取表单中的全部数据
function btnSubmit() {
var data=$("#registerForm").serialize();
//发送ajax到后台
$.post(
"/insert",
data,
function (result) {
if(result.code==0){
location.href="/list";
}

},
"json"


)


}
// 上传文件
function uploadPic(){
    //1. 创建FormData对象
    var formData = new FormData();
    //2. 向formData中封装文件上传项.
    formData.append("file",$("#headPic")[0].files[0]);
    //3. 发送ajax请求.
    $.ajax({
        url: "/upload/picc",
        data: formData,
        type: "POST",
        dataType: "json",
        success: function(result){
            if(result.code == 0){
                $("#img").attr("src",result.data);
                $("#hiddenPic").val(result.data);
            }else{
                alert("服务器爆炸,请灭火!!!");
            }
        },
        erorr: function(){
            alert("服务器爆炸,请灭火!!!");
        },
        contentType: false,
        processData: false
    });
}

// 动态显示图片
function preview(file){
    if (file.files && file.files[0]){
        reader = new FileReader();
        reader.onload = function(evt){
            $("#img").attr("src",evt.target.result);
        }
        reader.readAsDataURL(file.files[0]);
    }
    /*else{
        prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }*/
}
</script>
</body>
</html>
